Setting Up a React Native Project Using Expo

Course: React Native Training

Topic: Setting Up a React Native Project Using Expo

Course Link: React Native Training – JustAcademy

Demo Link: Register for a Course Demo

Official Expo Documentation: Create an Expo Project

React Native Documentation: React Native Getting Started Guide

1. Introduction to Expo in React Native

Expo is a framework and collection of tools built around React Native that simplifies mobile application development. It helps developers create, run, test, and build applications for Android and iOS using JavaScript or TypeScript and React Native components.

Setting up a React Native project using Expo is a popular approach for beginners because it reduces the amount of initial configuration required. Developers can create a project, start a development server, and preview the application on a physical device or emulator.

Expo provides tools for common mobile features, including image selection, notifications, file access, location, and other device capabilities. The availability and setup requirements depend on the selected API, project configuration, and development environment.

1.1 What Is Expo?

Expo is an open-source framework and platform that makes React Native development easier. It provides project templates, development tools, libraries, and optional cloud services for building and distributing mobile applications.

1.2 What Is a React Native Project?

A React Native project is the collection of source code, dependencies, configuration files, assets, and build settings used to develop a mobile application.

A typical project contains components, screens, styles, application logic, package configuration, and files that describe how the application should be built and launched.

1.3 Learning Objectives

• Understand Expo and its role in React Native development.
• Identify the software required before creating a project.
• Install and verify Node.js and npm.
• Create a React Native project using create-expo-app.
• Understand common Expo project templates.
• Explore the basic project folder structure.
• Start the development server and preview the application.
• Make changes to the initial application screen.
• Understand common setup errors and their solutions.
• Prepare a basic Expo project for further development.

2. Why Use Expo for React Native Development?

Setting up a mobile development environment manually can involve configuring native project files, build tools, dependencies, and platform-specific settings. Expo simplifies many common tasks and provides a convenient starting point.

2.1 Simplified Project Setup

The create-expo-app command generates a project with the required initial files and dependencies. This reduces the amount of manual configuration needed before developers can begin writing application code.

2.2 Android and iOS Support

An Expo project can target Android and iOS, and many projects can also support web. Developers can share components, business logic, and API services between supported platforms.

2.3 Faster Development Workflow

Expo provides a development server, Fast Refresh, and tools for previewing applications. Many changes to JavaScript or TypeScript code can appear in the running application without requiring a complete native rebuild.

2.4 Access to Device Features

Expo provides libraries for common device capabilities, such as image selection, location, notifications, and file handling. Some features require permissions, configuration changes, or a development build rather than Expo Go.

2.5 Cloud Build Options

Expo Application Services (EAS) provides optional cloud services for building and distributing applications. These services can be useful when preparing Android or iOS releases.

Official reference: Expo Documentation.

3. Prerequisites for Setting Up an Expo Project

Before creating an Expo project, ensure that your computer has the necessary tools and that your selected development workflow is supported.

3.1 Required Tools

3.2 Supported Operating Systems

Expo supports development on Windows, macOS, and Linux. Some tasks depend on the target platform. For example, local iOS simulator builds require a Mac with Xcode, while Android development can be performed on supported Windows, macOS, or Linux systems.

3.3 Check Node.js and npm

Open your terminal and execute:

node -v
npm -v

Both commands should display version numbers. Use a supported Node.js LTS release that satisfies the requirements of the selected Expo SDK.

If Node.js is not installed, download it from the official website: Download Node.js.

4. Understanding create-expo-app

create-expo-app is a command-line tool used to initialize a new Expo and React Native project. It generates a starting structure and configures the dependencies associated with the selected template.

4.1 Main Responsibilities

• Creates a new project directory.
• Generates the initial source files.
• Configures the project's package.json file.
• Installs or prepares the necessary dependencies.
• Provides a starting application template.
• Supports different templates and example projects.

4.2 Basic Command

npx create-expo-app@latest MyFirstApp

This command runs the Expo project generator and creates a project named MyFirstApp. Depending on the current Expo release, the command may prompt you to select a template or SDK version.

For current command options and templates, refer to create-expo-app Documentation.

5. Step 1: Install Node.js and npm

Node.js and npm are foundational tools for Expo development. Node.js runs the development utilities, while npm installs the packages required by the application.

5.1 Download Node.js

1. Open a web browser.
2. Visit the official Node.js download page.
3. Select a supported LTS version.
4. Download the installer for your operating system.
5. Run the installer and follow the instructions.
6. Open a new terminal after installation.

5.2 Verify Installation

node -v
npm -v

If both commands return version numbers, the tools are available in your terminal.

5.3 Troubleshooting

If the terminal reports that a command is not recognized, restart the terminal and check that Node.js is installed and available through the PATH environment variable.

6. Step 2: Install a Code Editor

A code editor helps developers work with JavaScript, TypeScript, React Native components, and project configuration files.

6.1 Recommended Editor

Visual Studio Code is a popular option for React Native development. It provides syntax highlighting, code navigation, formatting extensions, integrated terminal support, and debugging integrations.

Download it from the official Visual Studio Code website.

6.2 Open Your Project in the Editor

After creating the project, navigate to its directory and open it in your editor. If Visual Studio Code is installed and available through your terminal, you can use:

code MyFirstApp

Alternatively, open the editor manually and choose the project folder.

7. Step 3: Create a React Native Project Using Expo

This step creates a new project using the Expo project generator.

7.1 Open a Terminal

Use Command Prompt or PowerShell on Windows, Terminal on macOS, or a terminal application on Linux.

7.2 Run the Project Creation Command

npx create-expo-app@latest MyFirstApp

Here, MyFirstApp is the project name. You can choose another name that follows the project's naming requirements.

7.3 Choose a Template if Prompted

The project generator may offer a template or SDK selection. Follow the current Expo documentation and choose a template suitable for your learning goals and intended development workflow.

7.4 Wait for Setup to Finish

The generator creates the project files and installs the required packages. The process may take a few minutes depending on your internet connection and computer performance.

7.5 Navigate to the Project Directory

cd MyFirstApp

Run later commands from this directory unless the instructions specifically say otherwise.

8. Choosing the Correct Expo Template

Expo supports different project templates. The best choice depends on whether you want a minimal application, a multi-screen project, or a project with native directories prepared.

Template availability and behavior may change between Expo SDK releases. Consult the current create-expo-app reference before selecting a template.

8.1 Creating a Blank TypeScript Project

If you want a minimal project with TypeScript, a command such as the following may be used when that template is supported by the selected Expo version:

npx create-expo-app@latest MyFirstApp --template blank-typescript

8.2 Creating a Tabs Project

For a project with a tab-based navigation structure:

npx create-expo-app@latest MyTabsApp --template tabs

8.3 Which Template Should Beginners Choose?

The default template is a useful starting point for learning multi-screen application development. A blank template is also suitable if you want to understand every part of the interface and add navigation yourself.

9. Step 4: Understand the Project Folder Structure

After project creation, open the folder in your code editor. The exact structure depends on the chosen template and Expo SDK, but most projects include configuration files, dependencies, source code, and assets.

9.1 Example Project Structure

MyFirstApp/
├── app.json
├── package.json
├── package-lock.json
├── tsconfig.json
├── assets/
├── node_modules/
├── src/
│   └── app/
│       ├── _layout.tsx
│       └── index.tsx
└── README.md

This is an illustrative structure. Some templates may place application routes in an app/ directory at the project root or use a different folder arrangement.

9.2 Important Files and Folders

9.3 What Is Expo Router?

Expo Router is a routing library that organizes navigation using files and folders. In a project configured with Expo Router, files in the route directory can correspond to application screens.

For example, a file named app/profile.tsx may define a profile route. The exact route structure depends on the project's configuration and conventions.

10. Step 5: Understand package.json

The package.json file is central to managing a React Native project. It describes the project and lists dependencies and commands that developers can run.

10.1 Example package.json

{
  "name": "myfirstapp",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "version-managed-by-project",
    "react": "version-managed-by-project",
    "react-native": "version-managed-by-project"
  }
}

This is a simplified example for explanation, not a complete installable package.json file. Keep the actual dependency versions generated by the project tool; do not replace them with placeholder text.

10.2 Common npm Scripts

Commands such as npm run android and npm run ios depend on the scripts generated by the selected template. If a script is unavailable, use the appropriate Expo CLI command or check package.json.

11. Step 6: Start the Expo Development Server

The development server starts the local tooling used to run and preview the application. It displays connection information and a QR code that can be used to open the project on a compatible device.

11.1 Start the Server

From the project directory, run:

npx expo start

Alternatively, use the start script generated in package.json, if available:

npm start

11.2 What Happens After Starting?

• The Expo development server starts.
• The terminal displays a QR code and connection instructions.
• You can open the project on a compatible physical device.
• You can launch an available Android emulator or iOS simulator.
• Changes to source code can be reflected in the running application through the development workflow.

Official reference: Start Developing with Expo.

12. Step 7: Run the App on a Physical Device

Testing on a physical device helps developers understand how an application behaves with real touch interactions, screen dimensions, device permissions, and operating system features.

12.1 Install Expo Go

Install Expo Go on a supported Android or iOS device when the project is compatible with the app.

Official page: Get Expo Go.

12.2 Open the Project

1. Start the development server using npx expo start.
2. Ensure your computer and mobile device can reach each other over the network.
3. Open Expo Go on an Android device and use its QR scanning option.
4. On iOS, scan the QR code using the Camera app when supported by the current workflow.
5. Wait for the application to load.

12.3 Network Requirements

When using a local network connection, the computer and phone generally need to be on the same Wi-Fi network. Network isolation, firewalls, VPNs, and public Wi-Fi restrictions may prevent the device from reaching the development server.

12.4 Using Tunnel Mode

If the local connection does not work, you can try:

npx expo start --tunnel

Tunnel mode can help when the device cannot directly reach the development server, although it may be slower than a local connection.

13. Step 8: Run the App on an Android Emulator

An Android emulator allows developers to run a virtual Android device on their computer. It is useful for testing layouts, interactions, navigation, and platform behavior without using a physical Android phone.

13.1 Install Android Studio

Download Android Studio from the official website:

Android Studio Download

Follow the installation instructions and install the Android SDK components required by your workflow.

13.2 Create an Android Virtual Device

1. Open Android Studio.
2. Open the Device Manager.
3. Create a virtual device.
4. Choose a suitable device profile.
5. Select and download a compatible Android system image.
6. Finish the setup and start the emulator.

13.3 Launch the Expo App

Start the Expo development server:

npx expo start

When the terminal shows the Expo development controls, press A to open the project on an available Android emulator, where supported by the environment.

13.4 Common Emulator Problems

• The emulator is not running.
• The Android SDK or required system image is missing.
• The development server cannot communicate with the emulator.
• The computer does not have enough memory or processing capacity.
• The project requires a development build rather than Expo Go.

14. Step 9: Run the App on an iOS Simulator

The iOS Simulator is provided by Xcode and allows developers to test iOS applications on simulated Apple devices.

14.1 Install Xcode

Download Xcode from Apple's official developer resources or the Mac App Store.

Apple Xcode

14.2 Prepare the Simulator

1. Install Xcode on a Mac.
2. Open Xcode and complete any required setup.
3. Ensure that the required simulator runtime is installed.
4. Launch an available iOS simulator.
5. Start the Expo development server.

14.3 Open the Project

Run:

npx expo start

When an iOS simulator is available, press I in the Expo terminal interface to open the project using the supported local workflow.

Important: Local iOS simulator builds require macOS and Xcode. On Windows or Linux, use a supported alternative workflow, such as a compatible physical-device preview or cloud build service, according to the project's requirements.

15. Step 10: Make Your First Code Change

Once the application is running, edit a source file to understand the development cycle. Many Expo templates include an initial route file such as src/app/index.tsx or app/index.tsx.

Open the screen file used by your template and replace its content with the following simple example if the project uses the standard React Native setup:

import { StyleSheet, Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to MyFirstApp!</Text>
      <Text style={styles.subtitle}>
        My first React Native project using Expo.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f4f7fb',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 12,
  },
  subtitle: {
    fontSize: 16,
    textAlign: 'center',
  },
});

This component displays a heading and a subtitle. If your template uses a different route structure, place the component in the appropriate screen file and keep any existing navigation configuration required by the template.

15.1 Understanding the Code

• import loads the React Native components used by the screen.
• View provides a layout container.
• Text displays text content.
• StyleSheet.create() organizes component styles.
• flex: 1 allows the container to fill available space.
• justifyContent: 'center' centers content vertically in this layout.
• alignItems: 'center' centers content horizontally.

15.2 Observe the Result

Save the file and look at the running application. Fast Refresh will often update the screen automatically. If the changes do not appear, check the terminal for errors and reload the application.

16. Understanding Fast Refresh

Fast Refresh is a React Native development feature that helps developers see many changes to their JavaScript or component code quickly.

16.1 Benefits

• Reduces the need for manual reloads during normal development.
• Helps test layout and style changes quickly.
• Improves the feedback loop while building components.
• Can preserve component state for compatible edits.

16.2 When a Reload or Rebuild May Be Needed

Some changes require a full reload or a new native build, especially when they involve native dependencies, app configuration, permissions, or native project settings.

17. Understanding app.json and App Configuration

The app.json file contains configuration values used by Expo. It can define application metadata, platform settings, icons, splash screens, and other options.

17.1 Example Configuration

{
  "expo": {
    "name": "MyFirstApp",
    "slug": "myfirstapp",
    "version": "1.0.0",
    "orientation": "portrait",
    "android": {
      "package": "com.example.myfirstapp"
    },
    "ios": {
      "bundleIdentifier": "com.example.myfirstapp"
    }
  }
}

This is a simplified example. Preserve other fields generated by your project, and choose unique application identifiers appropriate for your own app before preparing a release.

17.2 Common Configuration Fields

Refer to the Expo app configuration documentation for supported fields and current configuration behavior.

18. Installing Additional Packages in an Expo Project

Applications often require extra functionality such as navigation, image selection, location, notifications, or secure storage. Packages should be selected based on the feature requirements and supported versions.

18.1 Install a Compatible Package

For libraries supported by Expo, prefer the Expo installation command when the documentation recommends it:

npx expo install package-name

Replace package-name with the actual package name. Expo can use SDK compatibility information to select an appropriate package version when supported.

18.2 Why Use npx expo install?

• Helps select compatible versions for the current Expo SDK.
• Can reduce version mismatch problems.
• Supports the workflow recommended for many Expo-compatible libraries.

18.3 Install Navigation or Other Libraries

Navigation and device features may require one or more additional packages. Read the official setup guide for the selected library rather than installing packages from a random command list.

Official reference: Expo Documentation.

19. Understanding Expo Go and Development Builds

Expo supports more than one way to run a development application. Beginners often start with Expo Go, while projects requiring additional native code commonly use a development build.

19.1 Expo Go

Expo Go is a mobile application that can load compatible Expo projects during development. It is convenient because it allows learners to preview supported features without creating a custom native application for every project.

19.2 Development Build

A development build is a custom version of the application that includes the native modules and configuration required by the project. It is often needed when an application uses native libraries that are not included in Expo Go or requires custom native configuration.

19.3 Comparison

For additional information, read Introduction to Development Builds.

20. Common Expo Commands

21. Troubleshooting Common Expo Setup Problems

22. Best Practices When Setting Up an Expo Project

• Install a supported Node.js LTS version before creating the project.
• Use the current official Expo project creation instructions.
• Choose a project template that matches your application requirements.
• Keep the generated package versions unless you have a reason to change them.
• Run commands from the correct project directory.
• Use version control such as Git to track source code changes.
• Store reusable components separately from screen-specific code when the project grows.
• Use TypeScript when appropriate for better type checking and maintainability.
• Install libraries through the recommended compatibility-aware process.
• Test on Android and iOS when both platforms are targets.
• Use a development build when custom native dependencies require it.
• Do not commit secrets or private credentials into the project repository.
• Read the terminal output carefully when an installation or build fails.

23. Practical Project: Create a Welcome Screen

Project Objective: Create a basic React Native application using Expo and display a welcome screen.

23.1 Requirements

• Create a new Expo project.
• Open the project in a code editor.
• Find the initial route or screen file.
• Display a title and description.
• Style the screen using StyleSheet.
• Run the application on a physical device or emulator.

23.2 Sample Code

import { StyleSheet, Text, View } from 'react-native';

export default function WelcomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>My First Expo App</Text>
      <Text style={styles.description}>
        Learning React Native step by step.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
    backgroundColor: '#ffffff',
  },
  heading: {
    fontSize: 26,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  description: {
    fontSize: 16,
    textAlign: 'center',
  },
});

23.3 Expected Result

The application should display a heading that says “My First Expo App” and a short description underneath it. The content should be centered on the screen.

23.4 Learning Outcomes

• Creating an Expo project.
• Understanding the screen file.
• Using View and Text components.
• Applying basic styles.
• Running the app through the Expo development server.

24. Practical Project: Create a Simple Counter App

Project Objective: Build an interactive counter that increases and decreases a displayed number.

24.1 Sample Code

import { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

export default function CounterScreen() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter App</Text>
      <Text style={styles.count}>Count: {count}</Text>
      <Pressable
        style={styles.button}
        onPress={() => setCount((value) => value + 1)}
      >
        <Text style={styles.buttonText}>Increase</Text>
      </Pressable>
      <Pressable
        style={styles.button}
        onPress={() => setCount((value) => value - 1)}
      >
        <Text style={styles.buttonText}>Decrease</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  count: {
    fontSize: 20,
    marginVertical: 20,
  },
  button: {
    backgroundColor: '#1769aa',
    padding: 14,
    borderRadius: 8,
    marginVertical: 6,
    minWidth: 140,
    alignItems: 'center',
  },
  buttonText: {
    color: '#ffffff',
    fontWeight: '600',
  },
});

24.2 Concepts Covered

• React state using useState.
• Handling button interactions with Pressable.
• Updating values through state setters.
• Styling components.
• Testing interactive behavior on a device.

25. Practical Project: Basic Profile Screen

Project Objective: Create a profile screen with a user's name, role, and short biography.

25.1 Requirements

• Display a profile title.
• Display the user's name and role.
• Show a short biography.
• Organize the content using reusable components.
• Style the screen for different device sizes.

25.2 Suggested Improvements

• Add a profile image using the Image component.
• Add an Edit Profile button.
• Use TextInput fields for editable information.
• Add form validation.
• Store profile information through a backend service when needed.

26. React Native Project Setup Interview Questions

Q1. What is Expo?

Answer: Expo is an open-source framework and platform that simplifies React Native development by providing project tools, libraries, development workflows, and optional build services.

Q2. What is create-expo-app?

Answer: It is a command-line tool used to create and configure a new Expo and React Native project.

Q3. Which command creates a new Expo project?

Answer: A common command is npx create-expo-app@latest MyFirstApp. The recommended options may depend on the current Expo SDK and desired template.

Q4. How do you start an Expo development server?

Answer: Navigate to the project directory and run npx expo start.

Q5. What is Expo Go?

Answer: Expo Go is a mobile application used to preview compatible Expo projects during development.

Q6. What is a development build?

Answer: A development build is a custom application build that contains the native modules and configuration required by a particular project.

Q7. What is Expo Router?

Answer: Expo Router is a routing library that uses a file-based approach to organize navigation and application screens.

Q8. What is the purpose of app.json?

Answer: It stores Expo application configuration such as the app name, icons, version, and platform-specific settings.

Q9. What is package.json?

Answer: It defines project metadata, dependency declarations, and scripts used to run development tasks.

Q10. Can Expo applications run on Android and iOS?

Answer: Yes. Expo supports both platforms, although device features and native build requirements depend on the application and chosen workflow.

Q11. Why might an Expo project require a development build?

Answer: A development build may be required when the application uses native modules or configuration that is not available in Expo Go.

Q12. Is a Mac required to create an Expo project?

Answer: No. You can create Expo projects on Windows, macOS, and Linux. However, local iOS simulator and native iOS builds require macOS and Xcode.

27. Practice Exercises

1. Install Node.js and verify the Node.js and npm versions.
2. Create an Expo project named MyFirstApp.
3. Open the project in Visual Studio Code.
4. Identify package.json, app.json, and the initial screen file.
5. Start the development server using npx expo start.
6. Open the project on a supported physical device or emulator.
7. Change the welcome message and verify that Fast Refresh works.
8. Create a counter component using useState.
9. Build a basic profile screen using View, Text, and Image.
10. Compare the experience of Expo Go with a development build.
11. Investigate one setup error and document how you resolved it.
12. Run the project on Android and iOS where the required devices and tools are available.

28. Quick Revision Checklist

• Understand Expo and its benefits.
• Install Node.js LTS and verify npm.
• Understand the create-expo-app command.
• Choose a suitable project template.
• Create a project and navigate to its folder.
• Understand the purpose of package.json and app.json.
• Recognize the common project folders and screen files.
• Start the development server using npx expo start.
• Understand QR-code preview and network requirements.
• Know how to use Android emulators and iOS simulators.
• Understand Expo Go and development builds.
• Use Fast Refresh to iterate on code.
• Install compatible packages using recommended commands.
• Diagnose common setup and dependency errors.
• Test the application on the intended platforms.

29. Conclusion

Setting up a React Native project using Expo is an accessible way to begin mobile application development. Expo provides a project generator, development server, libraries, and workflows that simplify many common tasks.

By installing Node.js, creating a project with create-expo-app, understanding the folder structure, and running the application, developers can quickly move from environment setup to writing real application code.

As projects grow, it is important to understand the difference between Expo Go and development builds, install compatible dependencies, configure native features correctly, and test on Android and iOS. These practices create a reliable foundation for building production-ready mobile applications.

Explore the course: React Native Training at JustAcademy

Register for a demo: Register for a Course Demo

Visit JustAcademy: JustAcademy Official Website

Official Learning Resources:

• Create an Expo Project
• Start Developing with Expo
• create-expo-app Reference
• Development Builds
• React Native Getting Started Guide
• Download Node.js